<template>
  <div class="app-container" style="display: flex; height: 100%">
    <div style="width: 30%; height: 100%; overflow-y: scroll">
      <el-tree
        :data="dataList"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        :default-expanded-keys="[2308297821294849]"
        node-key="id"
      />
    </div>
    <div style="width: 70%; overflow-y: scroll">
      <User ref="userList" :query-only="true" @selectChange="handleSelectionChange" />
    </div>
  </div>
</template>

<script>
import User from '@/views/manage/user/index.vue'
import { TduckListMixin } from '@/mixins/TduckListMixin'
import { getRequest } from '@/api/baseRequest'

export default {
  name: 'OrgTree',
  components: {
    User
  },
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      url: {
        list: '/org/tree'
      }
    }
  },
  mixins: [TduckListMixin],
  methods: {
    handleNodeClick(node) {
      this.$refs.userList.queryParams.parent = node.id
      this.$refs.userList.getList()
    },
    getList() {
      this.loading = true
      let param = this.getQueryParams()
      getRequest(this.url.list, param).then((response) => {
        this.dataList = response.data
        this.loading = false
      })
    },
    handleSelectionChange(ids, rows) {
      this.$emit('selectChange', ids, rows)
    }
  }
}
</script>

<style scoped></style>
